<template>
  <div>
    <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
      <template #typeCode="{ model, field }">
        <TreeSelect
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder=""
          allow-clear
          show-search
          :tree-data="treeData"
          treeNodeFilterProp="label"
          v-model:value="model[field]"
        />
      </template>
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'level'">
          <span title="普通" v-if="text == 0"><Icon icon="clarity:control-lun-line" /></span>
          <span title="一般" v-if="text == 1" style="color: orange"
            ><Icon icon="clarity:control-lun-outline-badged"
          /></span>
          <span title="紧急" v-if="text == 2" style="color: red"
            ><Icon icon="clarity:control-lun-outline-badged"
          /></span>
        </template>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              tooltip: '修改绩效',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'clarity:info-standard-line',
              tooltip: '查看',
              onClick: handleView.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <PersonStatisticsTableModal
      @register="registerPersonStatisticsTableModal"
      @success="handleSuccessPersonStatisticsTableModal"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, unref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema, setDisabled } from './personStatisticsTable.data';

  import { getFlowStatPerformanceListUserAttend } from '/@/api/flowManage/flowManage';
  import { useModal } from '/@/components/Modal';
  import PersonStatisticsTableModal from './modules/PersonStatisticsTableModal.vue';
  import { useRouter } from 'vue-router';
  import { useGo } from '/@/hooks/web/usePage';
  import { Icon } from '/@/components/Icon';
  import { getDirTree } from '/@/api/process/process';
  import { TreeSelect } from 'ant-design-vue';

  export default defineComponent({
    name: 'PersonStatisticsTable',
    components: {
      BasicTable,
      PersonStatisticsTableModal,
      TableAction,
      Icon,
      TreeSelect,
    },
    props: {
      tableName: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const { currentRoute } = useRouter();
      const userName = ref<any>('');
      const treeData = ref<Recordable[]>([]);
      const fetch = async () => {
        userName.value = unref(currentRoute).query.userName;
        getDirTree().then((res) => {
          const data = res || [];
          treeData.value = setDisabled(data);
          console.log('treeData', treeData.value);
        });
      };

      onMounted(() => {
        fetch();
      });
      const [registerTable, { reload, setProps, redoHeight }] = useTable({
        title: props.tableName,
        api: getFlowStatPerformanceListUserAttend,
        columns,
        formConfig: {
          labelWidth: 100,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        searchInfo: {
          op: 'search',
        }, //额外的参数
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        immediate: true,
        beforeFetch: (info) => {
          let newInfo = info;
          if (unref(userName)) {
            newInfo.userName = unref(userName);
          }
          return newInfo;
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      const [registerPersonStatisticsTableModal, { openModal }] = useModal();
      const handleSuccessPersonStatisticsTableModal = (data) => {
        console.log('data', data);
        reload();
      };
      const handleEdit = (record) => {
        openModal(true, { record, isUpdate: true });
      };

      const go = useGo();
      const handleView = (record) => {
        go({
          path: '/processShow',
          query: {
            flowId: record['flowId'],
            title: record['title'],
            isFromProcess: true,
            cacheName: `processShow${record['flowId']}`,
          },
        });
      };
      return {
        registerTable,
        registerPersonStatisticsTableModal,
        handleResizeColumn: (w, col) => {
          col.width = w;
        },
        handleSuccessPersonStatisticsTableModal,
        handleEdit,
        handleView,
        treeData,
      };
    },
  });
</script>
